<template>
	<div class="div1">
		搜索方式:
		<el-tooltip :content="selectValue" placement="top">
			<el-switch v-model="selectValue" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #aa55ff"
				active-value="精确搜索" inactive-value="模糊搜索" />
		</el-tooltip>
		<el-input v-model="findInput" style="max-width: 600px" clearable placeholder="请输入搜索的好友相关内容"
			class="input-with-select">
			<template #prepend>
				<el-select v-model="findSelect" placeholder="过滤" style="width: 80px">
					<el-option label="模糊" value="1" />
					<el-option label="昵称" value="2" />
					<el-option label="账户" value="3" />
					<el-option label="ID" value="4" />
				</el-select>
			</template>
			<template #append>
				<el-button icon="Search" @click="findUser" />
			</template>
		</el-input>
	</div>
	<div class="div2">
		<template v-if="showObj==null">
			<el-skeleton style="--el-skeleton-circle-size: 80px" animated>
				<template #template>
					<el-skeleton-item variant="circle" />
				</template>
			</el-skeleton>
			<br />
			<el-skeleton />
			<br />
			<el-text type="info">等待数据...去搜索一下试试吧！</el-text>
		</template>
		<template v-else>
			<el-descriptions direction="vertical" size="small" column="2" border style="width: 100%;">
				<el-descriptions-item :rowspan="2" label="头像" align="center">
					<el-avatar shape="square" size="large" :src="showObj.avatarPath">
						<img src="/headimg/default-1.jpeg" />
					</el-avatar>
				</el-descriptions-item>
				<el-descriptions-item label="用户账户">{{showObj.username}}</el-descriptions-item>
				<el-descriptions-item label="用户昵称">{{showObj.nickname}}</el-descriptions-item>
				<el-descriptions-item label="积分">{{showObj.points}}</el-descriptions-item>
				<el-descriptions-item span="2" label="账户id">{{showObj._id}}</el-descriptions-item>
				<el-descriptions-item label="签名">
					{{showObj.bio}}
				</el-descriptions-item>
			</el-descriptions>
			<el-tooltip class="box-item" :disabled="!power" effect="dark" :content="hint" placement="top">
				<loadBtn buttonType="success" loadingTime="10000" :disabled="power" @click="FriendQuery = true;">
					<template #default>
						申请好友
					</template>
				</loadBtn>
			</el-tooltip>
			<el-dialog v-model="FriendQuery" title="申请添加好友" width="500" center>
				<span>
					<el-text type="info">备注:</el-text><br><br>
					<el-input v-model="notesMessage" maxlength="50" style="width: 100%;" placeholder="对方可以看到你的备注消息"
						show-word-limit type="textarea" />
				</span>
				<template #footer>
					<div class="dialog-footer">
						<el-button type="primary" @click="addFriendQuery()">
							发送请求
						</el-button>
						<el-button type="warning" @click="FriendQuery = false">
							取消请求
						</el-button>
					</div>
				</template>
			</el-dialog>
		</template>
	</div>
	<div class="div3">
		<div v-for="(unit,index) in indexPage" class="unit" @mouseenter="setShow(unit)" style="max-width: 480px"
			:key="index">
			<div class="imgMessage">
				<el-avatar shape="square" size="10" :src="unit.avatarPath">
					<img src="/headimg/default-1.jpeg" />
				</el-avatar>
			</div>
			<div class="textNickname">
				<el-text truncated>
					昵称:{{unit.nickname}}
				</el-text>
			</div>
			<div class="textUsername">
				<el-text truncated>
					名称:{{unit.username}}
				</el-text>
			</div>
		</div>
		<template v-if="findRLS.length == 0">
			<el-empty>
				<el-text type="info">没有搜索数据</el-text>
			</el-empty>
		</template>
	</div>
	<div class="div4">
		<!-- 分页组件 -->
		<el-pagination class="test" hide-on-single-page :page-size="5" background layout="prev, pager, next"
			:total="findRLS.length" @current-change="changePage" />
	</div>
	<div class="div5">
		<div class="vertical-divider"></div>
	</div>
	<div class="div6">
		<div class="vertical-line"></div>
	</div>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		reactive,
		computed
	} from 'vue';

	import {
		ElNotification
	} from 'element-plus'

	let {
		proxy
	} = getCurrentInstance();

	import loadBtn from "@/element/loadBtn.vue"

	import useUser from "@/store/user.js"
	import useFriend from "@/store/friend.js"
	import useTabUnit from "@/store/tabUnit.js"
	let userData = useUser();
	let FriendData = useFriend();
	let tabUnitData = useTabUnit();

	// 搜索的相关内容
	let findInput = ref("admin");
	let findSelect = ref("");
	let selectValue = ref("精确搜索");

	// 搜索到的数据对象
	let findRLS = ref([]);


	// 根据输入值,查询好友列表的方法
	let findUser = () => {
		// 登录之前应该验证数据的可行性
		// 登录之后服务器再次进行验证
		proxy.$axios.get("/friend/find", {
			params: {
				find: findInput.value
			}
		}).then((rls) => {
			findRLS.value = rls.data.data;
		}).catch((error) => {
			ElNotification({
				title: '错误!',
				message: '用户登录失败，请检查网络连接！',
				type: 'error',
				offset: 100,
				duration: 3000,
			})
		});
	}




	// 设置展示的用户信息内容
	let showObj = ref(null);
	let power = ref(false);
	let hint = ref("");
	let page = ref(0);

	let setShow = (unit) => {
		showObj.value = unit;
		if (userData.user._id == showObj.value._id) {
			hint.value = "无法添加自己为好友"
			power.value = true;
		} else if (FriendData.findIndexById(showObj.value._id) != -1) {
			hint.value = "该用户已经是好友啦"
			power.value = true;
		} else {
			hint.value = ""
			power.value = false;
		}
	}

	// 好友请求弹出框显示
	let FriendQuery = ref(false);
	let notesMessage = ref("");
	// 添加好友请求的方法
	let addFriendQuery = () => {
		let message = {
			room: "system",
			sendID: userData.user._id,
			receiveID: showObj.value._id,
			notes: `${userData.user.nickname}请求添加好友`,
			message: notesMessage.value,
			sendType: "FQUERY",
			meta:{
				addName:userData.user.username,
				avatarPath:userData.user.avatarPath,
			}
		};
		proxy.$axios.post("/email/addEmail", {
			id: showObj.value._id,
			message,
			result:true
		}).then((rls) => {
			FriendQuery.value = false;
			if (rls.data.result) {
				ElNotification({
					title: '邮件发送成功!',
					message: '请求通过后将使用邮件通知，请耐心等待。',
					type: 'success',
					offset: 100,
					duration: 3000,
				})
			} else {
				ElNotification({
					title: '错误!',
					message: '邮件发送失败，请联系管理人员。',
					type: 'error',
					offset: 100,
					duration: 3000,
				})
			}
		}).catch((error) => {
			ElNotification({
				title: '错误!',
				message: '用户请求失败，请检查网络连接！',
				type: 'error',
				offset: 100,
				duration: 3000,
			})
		});
	}

	//当页码改变时触发
	let changePage = (CPage) => {
		page.value = (CPage - 1);
	}

	// 使用计算属性实现分页显示
	let indexPage = computed(() => {
		let start = page.value * 5;
		let end = 0;
		if (findRLS.value.length - start >= 5) {
			end = start + 5;
		} else {
			end = start + (findRLS.value.length - start);
		}

		return (findRLS.value).slice(start, end);
	})
</script>

<style scoped>
	/* 搜索选择框 */
	.div1 {
		grid-area: 24 / 1 / 31 / 14;
	}

	/* 分页框 */
	.div2 {
		grid-area: 1 / 1 / 22 / 14;
	}

	/* 信息展示框 */
	.div3 {
		grid-area: 3 / 17 / 26 / 28;
	}

	/* 查询列表框 */
	.div4 {
		grid-area: 29 / 18 / 31 / 27;
	}

	.div5 {
		grid-area: 1 / 14 / 31 / 15;
	}

	.div6 {
		grid-area: 23 / 1 / 24 / 14;
	}

	.unit {
		margin-bottom: 10px;
		padding: 5px;
		border: 2px solid rgba(201, 201, 201, 0.6);
		border-radius: 5px;
		font-size: 14px;

		display: grid;
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}

	.unit:hover {
		border: 2px solid rgba(0, 170, 255, 1.0);
	}

	.imgMessage {
		grid-area: 1 / 1 / 3 / 3;
	}

	.textNickname {
		grid-area: 1 / 3 / 2 / 8;
	}

	.textUsername {
		grid-area: 2 / 3 / 3 / 8;
	}

	.vertical-divider {
		width: 2px;
		height: 100%;
		background-color: transparent;
		border-left: 2px solid rgba(201, 201, 201, 0.6);
		margin: 0 10px;
		display: inline-block;
		vertical-align: middle;
	}

	.vertical-line {
		width: 100%;
		height: 2px;
		background-color: transparent;
		border-top: 2px solid rgba(201, 201, 201, 0.6);
		margin: 10 0px;
		display: inline-block;
		vertical-align: middle;
	}
</style>